<template>
  <div>
    <el-collapse v-model="activeName">
      <el-collapse-item :name="item.name" v-for="(item, index) in titleConfig" :key="index">
        <div slot="title" class="title_box">
          <div class="flex">
            <div class="leftLine"></div>
            <div class="fontSize16">{{ item.title }}</div>
          </div>
          <!-- 折叠面板上的按钮 -->
          <div style="display:flex;align-items: center;">
            <div class="btnBox" v-if="item.level === level && btnShow">
              <el-button v-for="(i, index) in item.btnList" :key="index" :type="i.type" :size="i.size"
                @click.stop="handleTitleBtn(i, index)">{{ i.name }}</el-button>
            </div>
            <i :class="judgeActive(item.name) != -1 ? 'downArrow2' : 'downArrow1'" />
          </div>
        </div>
        <slot :name="item.slot"></slot>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  provide: function () {
    return {
      disableKeys: this.disableKeys
    };
  },
  props: {
    disableKeys: {
      type: Array,
      default: () => []
    },
    titleConfig: {
      type: Array,
      default: () => []
    },
    activeNames: {
      type: Array,
      default: () => ["1", "2", "3", "4", "5", "6", "7"]
    },
    btnShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      level: JSON.parse(sessionStorage.getItem("org")).level, // 当前登录人部门级别
      activeName: []
    };
  },
  methods: {
    handleTitleBtn(item) {
      this.$emit("getResourcesData", item);
    },
    judgeActive(data) {
      return this.activeName.indexOf(data);
    }
  },
  watch: {
    activeNames(news, olds) {
      if (news) {
        this.activeName = news;
      }
    }
  },
  created() {
    console.log(this.activeNames, "this.activeNames");
    this.activeName = this.activeNames;
  }
};
</script>

<style lang="less" scoped>
:deep(.el-collapse-item__header) {
  border-bottom: 1px solid #ccc;
}

:deep(.el-collapse-item__content) {
  padding: 15px 0 0 0;
}

:deep(.el-collapse) {
  border: none;
}

:deep(.el-collapse-item__wrap) {
  border: none;
}

.title_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btnBox {
  margin-right: 10px;
}

:deep(.el-button) {
  font-size: 12px;
}

.downArrow1 {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.downArrow2 {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(-180deg);
}

:deep(.el-collapse-item__arrow) {
  display: none;
}</style>
